<template>

  <div class="main">
    <ul class="album album-leader" style=" ">
      <li class="title">风水大师列表</li>

        <li v-for="(lawyer, index) in lawyers">
          <a @click="goProfessor(lawyer.id)">
            <div class="avatar" style="position:relative;width:2.65rem;height:2.65rem;border-radius:50%;display:inline-block;">
              <img style="position:relative;width:2.65rem;height:2.65rem;border-radius:50%;display:inline-block;" class="avatarImg" :src="lawyer.avatar">
              <img class="verified" style="position:absolute;width:0.8833333333333333rem;height:0.8833333333333333rem;right:0;bottom:0;"
                src="/fengshui/static/pic/icon/verified.png"></div>
            <p></p>
            <p>{{lawyer.name}}</p>
            <p class="description">{{lawyer.title}}</p>
            <p class="description">{{lawyer.description}}</p>
            <!--<p class="description">
        <span>773</span>    
        <span></span>个回答，</span>
        <span>170089</span>
        <span>人收听</span></p>-->
          </a>
          <follow-btn class="follow-btn" :professorid="lawyer.id"   :followid="lawyer.follow_id" ></follow-btn>
        </li>
        
          <infinite-loading :on-infinite="onInfinite"  :distance="10" ref="infiniteLoading">
                   <i slot="spinner" class="loading-customer-spiral"></i>
                   <p slot="no-more">到底了 :)</p>
             </infinite-loading>
    </ul>
    <customer-footer index="1"></customer-footer>
  </div>
</template>

<script>
    import InfiniteLoading from 'vue-infinite-loading';
    import {
        showLoading
    } from '../js/dialogUtil.js'

    export default {

        components: {
            InfiniteLoading
        },
        data() {
            return {
                lawyers: [],
                page_index: 0,
                page_count: 100,
                count: 0,
            }
        },
        mounted() {
            let vm = this;
            //初始化数据
            // this.fetchData();
            // vm.$refs.my_scroller.resize()
        },
        methods: {
            goProfessor: function(id) {
                //跳转到大师的页面
                console.log(id);
                this.$router.push({
                    name: 'professor',
                    params: {
                        id: id
                    }
                });
            },
            onInfinite() {
                let vm = this;
                if (vm.page_index >= vm.page_count) {
                    return;
                }
                let params = {
                    p: vm.page_index + 1
                }
                vm.$http.jsonp(vm.url.acid + "&do=professors", {
                    params: params
                }).then(response => {
                    let json = response.body;
                    vm.page_count = json.page_count;
                    vm.lawyers = vm.lawyers.concat(json.data);
                    vm.count = json.count;
                    vm.page_index = json.page_index;
                    vm.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');

                    if (vm.page_index >= vm.page_count) {
                        vm.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');

                    }

                    //当前页等于最后一页停止加载数据
                }, response => {
                    vm.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                    showLoading(vm, "获得风水大师列表失败！");
                });
            }
        }
    }
</script>
<style>
    html,
    body,
    #app {
        height: 100%;
    }
</style>

<style scoped>
    .main,
    {
        height: 100%;
    }
    
    .album {
        margin-bottom: .5rem;
    }
    
    li,
    ol,
    ul {
        list-style: none;
    }
    
    .album li {
        position: relative;
        box-sizing: border-box;
        height: 4.15rem;
        border-top: 1px solid #e5e5e5;
        padding: 1rem 2.75rem 0 4.15rem;
        background-size: 2.65rem 2.65rem;
        background-position: left .75rem center;
        background-repeat: no-repeat;
    }
    
    .album .title {
        height: 2.25rem;
        line-height: 2.25rem;
        color: #999;
        font-size: .7rem;
        text-align: center;
        padding: 0;
    }
    
    .album-leader li {
        background: white;
        height: auto;
        padding: .7rem 2.75rem .7rem 4.15rem;
    }
    
    .album li .avatar {
        position: absolute!important;
        top: .555rem;
        left: .75rem;
    }
    
    .album-leader li .avatar {
        top: .9rem;
        width: 2.65rem;
        height: 2.65rem;
    }
    
    .album li p {
        color: #3f3f3f;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: .8rem;
        line-height: 1.2rem;
    }
    
    .album li .description {
        font-size: .65rem;
        line-height: .9rem;
        color: #999;
    }
    
    .album-leader li .follow {
        padding-top: 1.4rem;
    }
    
    .album li .follow-btn {
        position: absolute;
        top: .025rem;
        right: .75rem;
        padding-top: 1.08rem;
    }
    
    a,
    img {
        -webkit-touch-callout: none;
        text-decoration: none;
    }
</style>